<template>
	<view class="checker-label" :style="{ '--primary-color': props.currentBg, 'gap': `${props.gap}rpx` }">
		<view 
			class="checker-item" 
			v-for="(item,index) in list" 
			:key="item.key"
			:class="{ 'checker-current': index == currentIndex }"
			@click="currentChange(index)"
			:style="{ 'border-radius': props.isRadius ?  '10rpx' : 0 }"
		>
		{{ item.value }}
			<view 
				class="checker-current-icon" 
				:class="{ 'sup-icon' : props.labelPosition === 'top' }"
				v-if="index == currentIndex">
				<view class="current-icon-bg"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref,defineProps,defineEmits,onMounted } from 'vue'

/**
 * buttonTab 选择项
 * @description 
 * @property {Array} list 数据源
 * @property {Boolean} isRadius 是否圆角
 * @property {String} currentBg 高亮颜色
 * @property {String} labelPosition 标注位置（top,bottom)
 * @property {Number} gap 间隔
 */
const props = defineProps({
	list: {
		type: Array,
		default: []
	},
	isRadius: {
		type: Boolean,
		default: false
	},
	currentBg: {
		type: String,
		default: 'red'
	},
	labelPosition: {
		type: String,
		default: 'top'
	},
	gap: {
		type: Number,
		default: 0
	}
});

const currentIndex = ref(0);
const currentChange = (index) => {
	currentIndex.value = index;
}

onMounted(()=>{
	console.log(props);
})
</script>

<style lang="scss">
.checker-label {
	display: flex;
	height: 60rpx;
	.checker-item {
		padding: 10rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #ccc;
		&.checker-current {
			border-color: var(--primary-color);
			position: relative;
			color: var(--primary-color);
			.checker-current-icon {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 30rpx;
				height: 30rpx;
				box-sizing: border-box;
				border-style: solid;
				border-width: 15rpx;
				border-color: transparent var(--primary-color) var(--primary-color) transparent;
				&.sup-icon {
					top: 0;
					border-color: var(--primary-color) var(--primary-color) transparent transparent;
					.current-icon-bg {
						top: -15rpx;
					}
				}
				.current-icon-bg {
					position: absolute;
					top: -3rpx;
					left: -3rpx;
					width: 20rpx;
					height: 20rpx;
					background-image: url('./tick.png');
					background-size: 100% 100%;
				}
			}
		}
	}
}
</style>